<template>
  <div class="app-container">
    <div class="app-top">
      <div class="input-line">
        <span class="input-label">产品名：</span>
        <el-input v-model="tableParam.name" placeholder="请输入" style="width: 210px" clearable />
      </div>
      <div class="input-line">
        <span class="input-label">状态：</span>
        <el-select v-model="tableParam.status" placeholder="请选择" style="width: 120px">
          <el-option label="全部" :value="null" />
          <el-option label="正常" :value="1" />
          <el-option label="禁用" :value="0" />
        </el-select>
      </div>
      <div>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click=";(tableParam.page = 1), fetchData()"
        >
          搜索
        </el-button>
      </div>
    </div>

    <div class="function">
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="open('dialog')">
        添加
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      :header-cell-style="{ background: '#f3f6f9' }"
      :cell-style="{ borderRight: 'none' }"
      tooltip-effect="dark"
    >
      <el-table-column align="center" label="ID" prop="id" />
      <el-table-column align="center" label="产品名" prop="name">
        <template slot-scope="scope">
          <el-tooltip effect="dark" placement="c">
            <div class="ellipsis2">{{ scope.row.name }}</div>
            <template #content>
              <div class="tooltip-content">{{ scope.row.name }}</div>
            </template>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="押金(元)" prop="money" />
      <el-table-column align="center" label="总租金(元)" prop="rent" />
      <el-table-column align="center" label="地址" prop="adress" />
      <el-table-column align="center" label="详情">
        <template slot-scope="scope">
          <el-tooltip effect="dark" placement="bottom">
            <div class="ellipsis2">{{ scope.row.content }}</div>
            <template #content>
              <div class="tooltip-content">{{ scope.row.content }}</div>
            </template>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="赔偿标准">
        <template slot-scope="scope">
          <el-tooltip effect="dark" placement="bottom">
            <div class="ellipsis2">{{ scope.row.compensation }}</div>
            <template #content>
              <div class="tooltip-content">{{ scope.row.compensation }}</div>
            </template>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="140">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="启用"
            inactive-text="禁用"
            @change="setStatus(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="更新时间" align="center" prop="updateTime" />
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <div class="link">
            <el-link type="primary" @click="open('dialog', scope.row)">编辑</el-link>
            <el-link type="danger" @click="del(scope.row.id)">删除</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="app-pagination">
      <el-pagination
        :current-page.sync="tableParam.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="tableParam.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="sizeData"
        @current-change="fetchData()"
      />
      <el-button type="primary" size="mini" icon="el-icon-refresh" @click="fetchData()">
        刷新
      </el-button>
    </div>
    <AllDialog :dialog="dialog" :row="row" @reset="reset" @submit="submit" />
  </div>
</template>

<script>
const AllDialog = () => import('./dialog.vue')
import { queryAll, setStatus, del } from '@/api/goods'
export default {
  components: {
    AllDialog
  },
  data() {
    return {
      list: null,
      listLoading: true,
      tableParam: {
        page: 1,
        pageSize: 10,
        name: '',
        status: null
      },
      total: null,
      dialog: false,
      row: {}
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    open(key, row) {
      this.row = row
      this[key] = true
    },
    reset(key) {
      this[key] = false
    },
    submit(key) {
      this[key] = false
      this.fetchData()
    },
    setStatus(row) {
      setStatus({ id: row.id, status: row.status })
        .then((res) => {
          if (res.code * 1 === 200) {
            this.$message({
              message: `状态更新成功`,
              type: 'success',
              showClose: true
            })
            row.updateTime = res.data.updateTime
          }
        })
        .catch(() => {
          row.status = row.status * 1 === 0 ? 1 : 0
        })
    },
    del(id) {
      this.$confirm(`此操作将删除该用户, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          del({ id: id }).then((res) => {
            if (res.code * 1 === 200) {
              this.$message({
                message: `删除成功`,
                type: 'success',
                showClose: true
              })
              this.fetchData()
            }
          })
        })
        .catch(() => {})
    },
    sizeData(e) {
      this.tableParam.page = 1
      this.tableParam.pageSize = e
      this.fetchData()
    },
    fetchData() {
      const _this = this
      _this.listLoading = true
      queryAll(this.tableParam).then((res) => {
        console.log('xinxi', res.data.data)
        _this.list = res.data.data
        _this.total = res.data.total
        _this.listLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .tooltip-content {
    max-width: 460px;
    line-height: 20px;
  }
</style>
